<template>
<div class="bgimg">
  <div class="main">
      <el-form 
				:model="reUser"
				:rules="rule"
				status-icon
				ref="reUser"
        style="position:relative;top:10%;width:40%;left:30%"
				>
        <el-form-item prop="name"  style="width:60%;left:20%;position:relative;">
					<el-input prefix-icon="el-icon-user" v-model="reUser.name" placeholder="请输入用户名"></el-input>
				</el-form-item>
        <el-form-item prop="tel"  style="width:60%;left:20%;position:relative;">
					<el-input prefix-icon="el-icon-phone-outline" v-model="reUser.tel" placeholder="请输入手机号" maxlength="11" show-word-limit></el-input>
				</el-form-item>
				<el-form-item prop="pass" style="width:60%;left:20%;position:relative;">
					<el-input prefix-icon="el-icon-lock" v-model="reUser.pass" placeholder="请输入密码" type=passwrod show-password></el-input>
				</el-form-item>
				<el-form-item prop="pass1" style="width:60%;left:20%;position:relative;">
					<el-input prefix-icon="el-icon-lock" v-model="reUser.pass1" placeholder="再次输入密码" type=passwrod show-password></el-input>
				</el-form-item>
        <el-form-item prop="signature" style="width:60%;left:20%;position:relative;">
					<el-input prefix-icon="el-icon-set-up" v-model="reUser.signature" placeholder="请输入个性签名" ></el-input>
				</el-form-item>
				 <div style="left:20%;position:relative;">
					<div style="position:absolute;">
						<el-radio v-model="radio" label=true >男</el-radio>
						<el-radio v-model="radio" label=false>女</el-radio>
					</div>
					<div style="position:relative;left:35%;width:78px">
            <p>头像:</p>
						<el-tooltip content="上传头像" >
							<upload @input="getPath"></upload>
						</el-tooltip>
					</div>
				</div>
				<el-form-item class="bottun" style="position:relative;left:20%">
				    <el-button type="primary" style="width:30%;position:relative;" @click="doEnter('reUser')">确认</el-button>  
            <el-button type="primary" style="width:30%;position:relative;"@click="doEsc()" >退出</el-button>         
        </el-form-item>
				</el-form>
  </div>
</div>
  </el-button>
</template>

<script>
import upload from '../components/upload.vue'
export default {
  components:{
    upload
  },
  data () {
    	let validateTel=(rule,value,callback) =>{
      if(value===''){
        callback(new Error('请输入手机号'))
      }else if(!this.checkTel(value)){
        callback(new Error('手机号码非法'))
      }else{
		callback()
	  }
    };
    let validatePass=(rule,value,callback) =>{
    if(value===''){
        callback(new Error('请输入密码'))
    }else if(!this.checkPassword(value)){
         callback(new Error("密码至少包含数字和英文,长度6-20"))
    }else{
		if (this.reUser.pass1 !== "") {
          this.$refs.reUser.validateField("pass1");
        }
		callback()
	  }
    };
 let validatePass1=(rule,value,callback) =>{
    if (value === "") {
        callback(new Error("请再次输入密码"));
       } else if (value !== this.reUser.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      id:'',
      reUser :{
        name:'',
        tel:'',
        pass:'',
        pass1:'',
        signature:'',
      },
      radio:'',
      imgPath:'',
      rule:{
        tel:[{validator:validateTel,trigger: 'change'}],
        name:[{required: true, message: '请输入用户名', trigger: 'change'},
				{ min: 1, max: 6, message: '长度在 2 到 5 个字符', trigger: 'blur' }
				],
				pass:[{validator:validatePass,trigger: 'change'}],
				pass1:[{validator:validatePass1,trigger:'change'}],
        signature:[{required: true, message: '请输入个性签名', trigger: 'change'},
				{ min: 1, max: 10, message: '长度在 2 到 9 个字符', trigger: 'blur' }
				],
			},
    }
  },
  created() {
  },
  mounted(){
    this.id = localStorage.getItem('fromUserId')
    },
  methods: {
    getPath(imageUrl){
			this.imgPath = imageUrl
    },
    doEnter(formName){
      	let form = {
          id: this.id,
          password: this.reUser.pass,
          password1:this.reUser.pass1,
          pic:this.imgPath,
          sex: this.radio,
          signature: this.reUser.signature,
          tel: this.reUser.tel,
          userName:this.reUser.name
			}
			this.$refs[formName].validate((valid) => {
				if(valid){
					this.$axios.post('/api/website/user/update',form).then((resp) =>{
          console.log(resp)
          if(resp.code == 200 ){
            this.$message.success(resp.msg)
            this.$router.push('/home')
          }else{
            this.$message.error(resp.msg)
          }
					})
				}
			})
    },
    doEsc(){
      this.$router.push('/home')
    },
    checkTel(num){
            let reg =/^1[3|4|5|7|8][0-9]{9}$/
            if(reg.test(num)){
                return true
            }else{
                return false
            }
        },
        checkPassword(str){
            let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
            if(reg.test(str)) {
                return true;
            }else{
                return false;
            }
        },
}
}
</script>

<style scoped>
.main{
    height: 577px;
    width: 1075px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    /* border:1px solid ; */
    background-color: white;
    
    
}
.bgimg {
		position: absolute;
		background: url(../assets/bg.png) no-repeat center;
		background-size: cover;
		height: 100%;
		width: 100%;
	}
</style>
